<template>
  <div>
    <van-tabs v-model="active" animated swipeable class="home-page">
      <van-tab v-for="item in channels" :key="item.id" :title="`${item.name}`">
        <!-- 父组件中的子组件  自定义事件 -->
        <ArticleList :channel="item" @moreActionBtn="moreActionBtn" />
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 -->
    <div
      class="bar-btn"
      @click="showChannelEdit = true"
      v-if="$store.state.tokenInfo.token"
    >
      <van-icon name="wap-nav" />
    </div>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup v-model="showDeleteMore">
      <!-- 2.在父级组件中接收 emit传出来的自定义事件 -->
      <!-- 优化方案1: v-if="showDeleteMore"   这里不能用 v-show 不会将元素从dom中删除  而是控制的dispaly属性-->
      <!-- 优化方案2: ref ref="refMoreAction"-->
      <MoreAction
        ref="refMoreAction"
        @disLike="disLikeArticle"
        @report="reportBad"
      />
    </van-popup>
    <!-- 频道管理列表 -->
    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <ChannelEdit
        v-if="showChannelEdit"
        :channelIndex="active"
        @deleteChannel="deleteChannel"
        :myChannels="channels"
        @changeChannel="changeChannel"
      />
    </van-action-sheet>
  </div>
</template>
<script>
import { myChannel } from "@/api/channel.js";
import ArticleList from "./articleList.vue";
import MoreAction from "./moreAction.vue";
import ChannelEdit from "./channelEdit";
import { disLike, reportArticle } from "@/api/article.js";
export default {
  data() {
    return {
      active: 0, //当前高亮的频道下标
      channels: [], //我的频道列表
      showDeleteMore: false, //是否展示弹层
      articleIdClose: null, //点击关闭按钮对应的文章id
      showChannelEdit: false // 是否显示频道编辑弹层
    };
  },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  created() {
    //执行函数调用
    this.getChannels();
  },
  methods: {
    //改变当前高亮的频道
    changeChannel(index) {
      //1.改变当前频道的下标
      this.active = index;
      //2.关闭弹出层
      this.showChannelEdit = false;
    },

    //发布我们要删除不喜欢的文章 的事件
    //要传入 频道id 和文章id
    delArticleList() {
      //1.取出频道id
      const channelId = this.channels[this.active].id;
      //2.取出文章id
      const articleIdClose = this.articleIdClose;
      //发布删除文章数据的事件，传入需要的频道id和文章id
      this.$eventBus.$emit("delArticle", {
        channelId,
        articleIdClose
      });
    },
    //对文章不感兴趣
    async disLikeArticle() {
      console.log("对这篇文章不喜欢" + this.articleIdClose);
      //接口调用，删除后端的数据
      try {
        const res = await disLike(this.articleIdClose);
        console.log(res);
        this.$toast("成功");
        //对前端页面数据进行处理
        ////删除文章列表的函数中要把删除文章数据的事件通eventBus传到articleList组件中
        this.delArticleList();
      } catch (error) {
        this.$toast("失败");
      }
      //不管成功失败都要关闭弹出层
      this.showDeleteMore = false;
    },
    //举报文章
    async reportBad(val) {
      // console.log(val + "举报的值");
      try {
        ///调用接口
        await reportArticle({
          target: this.articleIdClose,
          type: val
        });
        // this.$toast("举报成功");
        //删除文章
        this.delArticleList();
      } catch {
        this.$toast("举报失败");
      }
      //不管成功失败 都关闭弹窗
      this.showDeleteMore = false;
    },
    //文章列表点击关闭的自定义函数
    moreActionBtn(articleId) {
      console.log(articleId, "文章id在index里面接收");
      this.articleIdClose = articleId; //是字符串，因为articleList.vue中传过来的时候进行了toString()
      //展示弹出层
      this.showDeleteMore = true;
      //当弹层打开的时候还原一下状态
      // console.log(this.$refs.refMoreAction.isReport, "子组件的内容");
      this.$refs.refMoreAction.isReport = false; //在父组件中修改子组件中的值
    },
    async getChannels() {
      try {
        const res = await myChannel();
        console.log(res);
        this.channels = res.data.data.channels;
      } catch (error) {
        console.log(error);
      }
    },
    //删除频道
    deleteChannel(val) {
      this.active = val;
    },
    showPopup() {
      this.showDeleteMore = true;
    }
  }
};
</script>
<style lang="less">
.home-page {
  .van-tabs__wrap {
    position: fixed;
    left: 0;
    top: 46px;
    right: 40px;
    z-index: 1;
  }
  .van-tabs__content {
    padding: 100px 0 80px 0;
  }
}
.van-action-sheet {
  // max-height: 100%;
  min-height: 85%;
}
.van-action-sheet__header {
  background: #1989fa;
  color: #fff;
}
// 频道管理的开关按钮
.bar-btn {
  position: fixed;
  right: 0px;
  top: 50px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 1;
  z-index: 2;
  height: 50px;
  width: 30px;
  .van-icon-wap-nav {
    font-size: 20px;
  }
}
</style>
